<template>
  <div class="app-container flex-column">
    <div class="flex-bd">
      <GanttList ref="ganttList" :options="tableOptions" :ganttOptions="ganttOptions">
        <template #formList>
          <FormList ref="formList" v-show="tableOptions.serch.show" :formParams="serchParams" :options="serchOptions" @serch="getList('serch')" @reset="getList('reset')"></FormList>
        </template>
      </GanttList>
    </div>
    <DialogList :options="formDialog">
      <FormList ref="formListDialog" :formParams="formParams" :options="formOptions" :visible="formDialog.visible"></FormList>
      <template #footer>
        <el-button size="small" @click="formDialog.visible = false">取消</el-button>
        <el-button size="small" type="primary" @click="onSubmit">确定</el-button>
      </template>
    </DialogList>
    <DialogList :options="fileDialog">
      <UploadList ref="uploadList" :options="fileDialog" :visible="fileDialog.visible" :down="tableOptions.down"></UploadList>
      <template #footer>
        <el-button size="small" @click="fileDialog.visible = false">取消</el-button>
        <el-button size="small" type="primary" @click="onFileSubmit">确定</el-button>
      </template>
    </DialogList>
  </div>
</template>

<script>
import request from '@/utils/request'
import { objStr } from "@/utils/ruoyi"
import FormList from '@/components/Common/FormList'
import GanttList from '@/components/Common/GanttList'
import DialogList from '@/components/Common/DialogList'
import UploadList from '@/components/Common/UploadList'
export default {
  name: "GanttDemo",
  components: {
    FormList,
    GanttList,
    DialogList,
    UploadList
  },
  data() {
    return {
      serchParams: {
        skuCode: '',
        brand: [],
      },
      serchOptions: {
        inline: true,
        isSubmit: true,
        columns: [
          {
            type: 'text',
            prop: 'skuCode',
            label: 'skuCode：',
            placeholder: "请输入skuCode",
            clearable: true
          },
          {
            type: 'select',
            prop: 'brand',
            label: 'Brand：'
          },
        ]
      },
      tableParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: '',
        isAsc: ''
      },
      tableOptions: {
        loading: false,
        list: {
          url: '/data/sku/list'
        },
        add: {
          url: '/data/sku',
          auth: ['data:sku:add'],
          name: '',
          click:() => {
            this.formParams.id = null          
            this.formDialog.title = '新增'
            this.formDialog.visible = true
          }
        },
        import: {
          url: '/data/sku/import',
          auth: ['data:sku:import'],
          name: '',
          click:() => {
            this.fileDialog.visible = true
          }
        },
        down:{
          url: '/data/sku/importTemplate',
          auth: ['data:sku:importTemplate'],
          name: '',
          click:() => {
            this.download(this.tableOptions.down.url, {}, `下载${new Date().getTime()}.xlsx`)
          }
        },
        export: {
          url: '/data/sku/export',
          auth: ['data:sku:export'],
          name: '',
          click:() => {
            this.download(this.tableOptions.export.url, objStr(this.serchParams), `导出${new Date().getTime()}.xlsx`)
          }
        },
        del: {
          url: '/data/sku',
          auth: ['data:sku:remove'],
          name: '',
          click:() => {
            this.delList(this.tableOptions.multiples)
          }
        },
        view: {
          url: '/data/sku'
        },
        edit: {
          url: '/data/sku',
          auth: ['data:sku:edit'],
        },
        serch: {
          show: true,
          click:() => {
            this.tableOptions.serch.show = !this.tableOptions.serch.show
          }
        },
        multiples: [],
        pageConfig: {
          total: 0
        },
        pageMethod: {
          ['current-change']:(val) => {
            this.tableParams.pageNum = val
            this.getList()
          },
          ['size-change']:(val) => {
            this.tableParams.pageSize = val
            this.getList()
          }
        }
      },
      ganttOptions: {
        container: 'gantt',
        height: '100%',
        plugins: {
          tooltip: true
        },
        config: {
          min_column_width: 120,
          sort: true,
          layout: {
            css: "gantt_container",
            cols: [
              {
                width: 405,
                min_width: 405,
                rows: [
                  { view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer" },
                  { view: "scrollbar", id: "gridScroll", group: "horizontal" }
                ]
              },
              { resizer: true, width: 1 },
              {
                rows: [
                  { view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },
                  { view: "scrollbar", id: "scrollHor", group: "horizontal" }
                ]
              },
              { view: "scrollbar", id: "scrollVer" }
            ]
          },
          scales: [ // 自定义右侧列
            { unit: "hour", step: 1, format: "%H:%i" }
          ],
          columns: [
            {
              name: "id",
              label: "ID",
              align: "center",
              isFilter: false,
              visible: true,
              sort: 'id',
              resize: true,
              width: 120,
              template:function(row){
                return `自定义转换；${row.id}`
              }
            },
            {
              name: "skuCode",
              label: "sku编码",
              align: "center",
              isFilter: true,
              visible: true,
              sort: false,
              resize: true,
              width: 90,
            },
            {
              name: "skuName",
              label: "sku名称",
              align: "center",
              isFilter: true,
              visible: true,
              sort: false,
              resize: true,
              width: 90,
            },
            {
              name: "primaryKey",
              label: "秘钥",
              align: "center",
              isFilter: true,
              visible: true,
              sort: true,
              resize: true,
              width: 90,
            },
          ]
        },
        data: {
          tasks: []
        },
        templates: {
          grid_header_class: function(columnName, column){
            return column.sort != false ? 'sort' : '';
          },
          // tooltip_text: ((start, end, task) => {
          //   console.log(start, end, task, 8)
          //   return `自定义：${task.text}`
          // })
        },
        events: {
          onGanttReady: () => {
            this.$nextTick(() => {
              var tooltips = this.$refs['ganttList'].ganttInstance.ext.tooltips
              tooltips.tooltipFor({
                  selector: ".gantt_row_task",
                  html: function (event, domElement) {
                      return null
                  }
              })
              tooltips.tooltipFor({
                  selector: ".gantt_bar_task",
                  html: (event, domElement) => {
                    var id = domElement.getAttribute("task_id");
                    var task = this.$refs['ganttList'].ganttInstance.getTask(id);
                    return `自定义：${task.text}`
                  }
              })
            })
          },
          onAfterSort: (field, direction, parent) => {
            let current = this.ganttOptions.config.columns.find(v => v.name === field)
            if(typeof current.sort === 'string'){
              this.tableParams.orderByColumn = field
              this.tableParams.isAsc = direction ? 'desc' : 'asc'
              this.getList()
            }
          }
        }
      },
      formDialog: {
        title: '新增',
        visible: false,
      },
      formParams: {
        id: null,
        skuCode: '',
        brand: '',
      },
      formOptions: {
        inline: false,
        labelWidth: '7em',
        isSubmit: false,
        columns: [
          {
            type: 'text',
            prop: 'skuCode',
            label: 'skuCode：',
            placeholder: "请输入skuCode",
            clearable: true,
            rules: [
              { required: true, message: '请输入skuCode', trigger: 'blur' }
            ]
          },
          {
            type: 'text',
            prop: 'brand',
            label: 'Brand：'
          },
        ]
      },
      fileDialog: {
        title: '文件上传',
        visible: false,
        ['http-request']:(res) => {
          this.onUploadFile(res)
        } 
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList(type){
      this.tableOptions.multiples = []
      if (type === 'serch') {
        this.tableParams.pageNum = 1
      }
      if (type === 'reset') {
        this.tableParams.pageNum = 1
        this.tableParams.pageSize = 10
        this.tableParams.orderByColumn = ''
        this.tableParams.isAsc = ''
      }
      this.tableOptions.loading = true
      let { rows, total } = await request({
        url: this.tableOptions.list.url,
        method: 'get',
        params: {
          ...objStr(this.serchParams),
          ...this.tableParams
        }
      })
      setTimeout(() => {
        this.tableOptions.loading = false
        this.ganttOptions.data.tasks = rows.map(v => {
          return {
            ...v,
            id: v.id,
            text: v.skuName,
            start_date: '2024-03-01 08:00',
            end_date: '2024-03-01 14:00'
          }
        })
        this.tableOptions.pageConfig.total = total
      }, 300)
    },
    async addList() {
      let { heads, rows, total } = await request({
        url: this.tableOptions.add.url,
        method: 'post',
        data: this.formParams
      })
      this.$modal.msgSuccess("新增成功")
      this.formDialog.visible = false
      this.getList('serch')
    },
    async viewList(id) {
      this.formDialog.title = '编辑'
      this.formDialog.visible = true
      let { data } = await request({
        url: this.tableOptions.view.url + '/' + id,
        method: 'get'
      })
      for (let key in this.formParams) {
        this.formParams[key] = data[key]
      }
    },
    async editList(obj) {
      await request({
        url: this.tableOptions.edit.url,
        method: 'put',
        data: obj ? obj : this.formParams
      })
      this.$modal.msgSuccess("编辑成功")
      this.formDialog.visible = false
      this.getList()
    },
    delList(id) {
      this.$modal.confirm('是否确认删除？').then(async () => {
        await request({
          url: this.tableOptions.del.url + '/' + id,
          method: 'delete'
        })
        this.$modal.msgSuccess("删除成功")
        this.getList('serch')
      })
    },
    async onSubmit() {
      let isCheck = this.$refs['formListDialog'].onValidate()
      if (isCheck) {
        if (this.formParams.id) {
          this.editList()
        } else {
          this.addList()
        }
      }
    },
    async onFileSubmit(){
      this.$refs['uploadList'].onSubmitFile();
    },
    async onUploadFile(res){
      const formData = new FormData()
      formData.append('file', res.file)
      await request({
        url: this.tableOptions.import.url, 
        method: 'post', 
        data: formData
      })
      this.fileDialog.visible = false
      this.$modal.msgSuccess("导入成功")
      this.getList('serch')
    }
  },
};
</script>

<style scoped lang="scss"></style>

